<template>
  <view class="container">
    <view class="area">
      <u-image :src="bg1" :lazy-load="true" width="100%" :height="bg1Height"></u-image>
      <text class="bgtext">活动期间，完成简历投递，有机会参与系统抽奖，奖品和名额详见“活动奖励”。</text>
    </view>
    <view class="area">
      <u-image :src="bg3" :lazy-load="true" width="100%" :height="bg3Height"></u-image>
      <text class="bgtext date">2024年3月31日</text>
    </view>
    <view class="area">
      <u-image :src="bg5" :lazy-load="true" width="100%" :height="bg5Height"></u-image>
      <u-table class="posit table-1" font-size="20">
        <u-tr>
          <u-th>奖品级别</u-th>
          <u-th>奖品</u-th>
          <u-th>名额</u-th>
        </u-tr>
        <u-tr v-for="(item, index) in datalist.prizeList" :key="index">
          <u-td>{{ item.prizeName }}</u-td>
          <u-td>{{ item.prizeDetail }}</u-td>
          <u-td>{{ item.totalNum }}</u-td>
        </u-tr>
      </u-table>
      <view class="recodeBtn" @click="checkRecode">抽奖记录 ></view>
    </view>
    <view class="bottomText">
      <text class="whiteText">本次所有活动的解释权归深圳市一览网络股份有限公司所有</text>
    </view>
  </view>
</template>

<script>
import { getZphPrizeRecord } from "@/api/modules/zph.js";
import ShareMixin from "@/mixins/share";
export default {
  mixins: [ShareMixin],
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || "",
      bg1: this.$imgBaseSelf + "zph/activityBg7.png",
      bg3: this.$imgBaseSelf + "zph/activityBg3.png",
      bg5: this.$imgBaseSelf + "zph/activityBg5.png",
      bg1Height: 0,
      bg3Height: 0,
      bg5Height: 0,

      prizeMines: [],
      prizeWheels: [],
      prizeRecords: [
        {
          prizeName: "一等奖",
          code: "lottery_draw_first_prize",
          objs: [
            {
              id: "1",
              action: 1,
              prizeDetail: "职途卡（886元顾问版）",
            },
            {
              id: "2",
              action: 0,
              prizeDetail: "100元京东礼品卡",
            },
          ],
        },
        {
          prizeName: "二等奖",
          code: "lottery_draw_second_prize",
          objs: [
            {
              id: "3",
              action: 1,
              prizeDetail: "职途卡（298元专业版）",
            },
            {
              id: "4",
              action: 0,
              prizeDetail: "50元京东礼品卡",
            },
          ],
        },
        {
          prizeName: "三等奖",
          code: "lottery_draw_third_prize",
          objs: [
            {
              id: "5",
              action: 1,
              prizeDetail: "职业测评体验卡1次",
            },
            {
              id: "6",
              action: 1,
              prizeDetail: "AI面评3次",
            },
            {
              id: "7",
              action: 0,
              prizeDetail: "6.6元新春红包",
            },
          ],
        },
        {
          prizeName: "阳光普照奖",
          code: "lottery_draw_sunshine",
          objs: [
            {
              id: "8",
              action: 1,
              prizeDetail: "职业测评体验卡1次",
            },
            {
              id: "9",
              action: 1,
              prizeDetail: "AI面评3次",
            },
          ],
        },
      ],
      datalist: {
        prizeList: [
          {
            id: "1",
            prizeDetail: "职途卡（886元顾问版）+100元京东礼品卡",
            prizeName: "一等奖",
            totalNum: "6",
          },
          {
            id: "2",
            prizeDetail: "职途卡（298元专业版）+50元京东礼品卡",
            prizeName: "二等奖",
            totalNum: "18",
          },
          {
            id: "3",
            prizeDetail: "职业测评体验卡1次 +AI面试体验卡3次+6.6元新春红包",
            prizeName: "三等奖",
            totalNum: "300",
          },
          {
            id: "4",
            prizeDetail: "职业测评体验卡1次 +AI面评3次",
            prizeName: "阳光普照奖",
            totalNum: "不限",
          },
        ],
      },
      isLoading: false,
    };
  },

  mounted() {
    console.log("活动页面 - mounted");
    this.sharePath = "/pagesSub/careerGrow/zph/zphActivity";
    this.getHeaderHeight();
  },

  methods: {
    checkRecode() {
      console.log("抽奖记录----");
      this.getPrizeRecord();
    },

    getHeaderHeight() {
      let width = uni.getSystemInfoSync().windowWidth;
      this.bg1Height = width * (324 / 1013) + "px";
      this.bg3Height = width * (293 / 1013) + "px";
      this.bg5Height = width * (841 / 1013) + "px";
    },

    // 领取奖励记录
    getPrizeRecord() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      const params = {
        personId: this.personId,
        prizeType: "lottery_draw", // 奖品类型(assistence:助力奖品，lottery_draw：抽奖奖品)
      };
      getZphPrizeRecord(params)
        .then((res) => {
          console.log("🚀 ~ getZphPrizeRecord ~ res:", res);
          if (res.code == 200) {
            this.prizeWheels = res.data.lotteryAnnouncementList;
            console.log("🚀 ~ .抽奖公示", this.prizeWheels);

            let list = res.data.prizeRecordList;
            if (list && list.length > 0) {
              var results = [];
              list.forEach((item, index) => {
                const result = this.prizeRecords.find(
                  (obj) => obj.code == item.prizeCode
                );
                results.push(result);
              });
              this.prizeMines = results;
              console.log("🚀 ~ .抽奖公示 - 显示数据", results);
            }
            this.$emit("didClick", this.prizeWheels, this.prizeMines);
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background-color: #8484ff;

  .area {
    position: relative;
    margin-bottom: 20rpx;

    .posit {
      position: absolute;
      top: 10rpx;
      padding: 100rpx 20rpx 0;
    }
    .bgtext {
      position: absolute;
      top: 10rpx;
      font-size: 25rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #454b5b;
      line-height: 42rpx;
      margin: 100rpx 20rpx;
    }
    .textCenter {
      width: 100%;
      text-align: center;
    }

    .date {
      font-size: 33rpx;
      font-weight: 500;
      width: 100%;
      text-align: center;
      padding: 0;
      margin-top: 100rpx;
    }

    .table-1 {
      margin-top: 16rpx;
      width: 95%;
    }

    .recodeBtn {
      font-size: 31rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #454b5b;
      position: absolute;
      left: 43%;
      bottom: 38rpx;
    }
  }
  .bottomText {
    display: flex;
    justify-content: center;
    .whiteText {
      color: white;
    }
  }
}
</style>
